body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(#9bdfff, #009be4);
}

.infinite {
    position: relative;
    width: 800px;
    height: 160px;
    background: #525252;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(30deg);
}

.infinite::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 10px;
    /* 通过  transform: translateX(-50%); 把自己的中心对准 */
    transform: translateY(-50%);
    background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
    background-size: 120px;
    /* background-repeat: no-repeat; */
    animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: 120px;
    }
}

.infinite::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: -30px;
    background: #333;
    /* transform: translateY(-50%); */
    transform-origin: top;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(-25deg);
}

.infinite .shadow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 60px;
    bottom: -93px;
    background: linear-gradient(#000, transparent);
}